<template>
			<el-drawer
				title="创建活动"
				:before-close="handleClose"
				:visible.sync="dialog"
				direction="rtl"
				custom-class="demo-drawer diydrawer">
				<div class="demo-drawer__content diydrawer__content">
						<div class="diydrawer_header">
							<div class="diydrawer_left" >
								<div style="margin-top: 8px;" >基础配置</div>
								<el-form  class="diydrawer_left_form form" style="margin-top: 20px;" :model="drawerData" :rules="dataRule" ref="dataForm" label-position="left" label-width="140px" size="medium" :inline="false"
									labelSuffix="">
									<el-form-item prop="activity_name" label="活动名称" >
										<el-input clearable v-model="drawerData.activity_name"  maxlength="15" show-word-limit placeholder="请输入活动名称" />
									</el-form-item>
									
									<el-form-item prop="applet_id" label="小程序" >
										<el-select v-model="drawerData.applet_id" :disabled="id?true:false" placeholder="请选择小程序" @change="deleteAppletCouponId()">
											<el-option
												v-for="item in appletlist"
												:key="item.value"
												:label="item.label"
												:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>

									<el-form-item v-if="drawerData.applet_id" prop="applet_coupon_id" label="小程序券ID" >
										<el-select v-model="drawerData.applet_coupon_id" :disabled="id?true:false" @focus="getAppletCouponId(drawerData.applet_id)" @change="getCouponIndex(drawerData.applet_coupon_id)" placeholder="请选择">
											<el-option class="diyeloption"
											v-for="item in AppletCouponList"
											:key="item.id"
											:label="item.id"
											:value="item.id">
										
											<div style="float: left; color: #8492a6; font-size: 13px">
												<div>{{ item.name }}</div>
												<div>{{ item.id }}</div>
												<div>{{ item.coupon_meta_id }}</div>
											</div>
											</el-option>
										</el-select>
									</el-form-item>

									<el-form-item  v-if="drawerData.applet_coupon_id && AppletCouponList.length>0" label="" >
										<div class="coupon_card">
											<div style="width: 22%;">
												<div>券名称</div>
												<div>库存</div>
												<div>可发放期限</div>
											</div>
											<div>
												<div>{{ AppletCouponList[AppletCouponIndex].name }}</div>
												<div>{{ AppletCouponList[AppletCouponIndex].stock_number }}</div>
												<div>{{ AppletCouponList[AppletCouponIndex].receive_begin_time + '&nbsp至&nbsp' + AppletCouponList[AppletCouponIndex].receive_end_time }}</div>
											</div>
										</div>
									</el-form-item>

									<el-form-item prop="short_title" label="权益简称" >
										<el-input clearable v-model="drawerData.short_title"  maxlength="5" show-word-limit placeholder="请输入权益简称" />
									</el-form-item>

									<el-form-item prop="receive_limit" label="单用户可领取张数">
										<el-input-number v-model="drawerData.receive_limit"  :min="1"></el-input-number>
									</el-form-item>

									<el-form-item prop="valid_time" label="活动生效时间">
										<el-date-picker
											v-model="drawerData.valid_time"
											type="datetimerange"
											range-separator="至"
											:picker-options="pickerOptions"
											start-placeholder="开始日期"
											end-placeholder="结束日期">
										</el-date-picker>
									</el-form-item>

									<el-form-item prop="high_value_content" label="引流文案" >
										<el-input clearable v-model="drawerData.high_value_content" maxlength="11" show-word-limit placeholder="请填写跟用户获取福利所匹配的文案，否则审核失败" />
									</el-form-item>

									<el-form-item prop="recent_bubble_text" label="红点气泡文案" >
										<el-select v-model="drawerData.recent_bubble_text" placeholder="请选择红点气泡文案">
											<el-option
											v-for="item in bubbleText"
											:key="item.value"
											:label="item.label"
											:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>

									<el-form-item prop="jump_text" label="去使用按钮文案" >
										<el-select v-model="drawerData.jump_text" placeholder="请选择去使用按钮文案">
											<el-option
											v-for="item in useText"
											:key="item.value"
											:label="item.label"
											:value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-form>
							</div>
							<div class="diydrawer_right">
								<div v-if="bottomIndex==1" style="width: 100%;">
									<div class="semi-typography">首页引流文案(仅对部分用户开放)</div>
									<div style="position: relative;">
										<img style="width: 100% !important;margin-top: 24px;" src="//lf-cdn-tos.bytescm.com/obj/static/open/ability/coupon_admin_web/static/image/sidebar-bg-1-1.1b2440ea.png">
										<div  style="top: 70px;left: 14px;padding: 2px;display: flex;align-items: center;border-radius: 14px;" class="absolute top-[86px] left-[10px] text-left bg-white rounded-full px-2 py-[5px]">
											<div class="flex items-center">
												<span style="margin-top: 4px;" role="img" aria-label="descend" class="semi-icon semi-icon-default semi-icon-descend text-[10px]">
													<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false" aria-hidden="true">
														<g opacity="0.99">
															<path d="M2 19.5C2 18.6716 2.67157 18 3.5 18H9.5C10.3284 18 11 18.6716 11 19.5C11 20.3284 10.3284 21 9.5 21H3.5C2.67157 21 2 20.3284 2 19.5Z" fill="currentColor"></path>
															<path d="M2 12C2 11.1716 2.67157 10.5 3.5 10.5H14.5C15.3284 10.5 16 11.1716 16 12C16 12.8284 15.3284 13.5 14.5 13.5H3.5C2.67157 13.5 2 12.8284 2 12Z" fill="currentColor"></path>
															<path d="M2 4.5C2 3.67157 2.67157 3 3.5 3H20.5C21.3284 3 22 3.67157 22 4.5C22 5.32843 21.3284 6 20.5 6H3.5C2.67157 6 2 5.32843 2 4.5Z" fill="currentColor"></path>
														</g>
													</svg>
												</span>
												<span style="margin: 0 4px;font-size: 13px;line-height: 24px;color:#50515a;padding-top: 3px;" class="semi-typography ml-[6px] mr-[8px] text-xs font-medium text-[#50515A] semi-typography-primary semi-typography-normal">{{drawerData.short_title || '首页引流文案'}}</span>
												<span style="margin-top: 5px;" role="img" aria-label="close" class="semi-icon semi-icon-default semi-icon-close text-[10px] text-semi-color-text-2">
													<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" focusable="false" aria-hidden="true">
														<path d="M17.6568 19.7782C18.2426 20.3639 19.1924 20.3639 19.7782 19.7782C20.3639 19.1924 20.3639 18.2426 19.7782 17.6568L14.1213 12L19.7782 6.34313C20.3639 5.75734 20.3639 4.8076 19.7782 4.22181C19.1924 3.63602 18.2426 3.63602 17.6568 4.22181L12 9.87866L6.34313 4.22181C5.75734 3.63602 4.8076 3.63602 4.22181 4.22181C3.63602 4.8076 3.63602 5.75734 4.22181 6.34313L9.87866 12L4.22181 17.6568C3.63602 18.2426 3.63602 19.1924 4.22181 19.7782C4.8076 20.3639 5.75734 20.3639 6.34313 19.7782L12 14.1213L17.6568 19.7782Z" fill="currentColor"></path>
													</svg>
												</span>
											</div>
										</div>
									
									</div>
									
									<h6 style="font-size: 16px;font-weight: 600;line-height: 22px;">红点气泡&amp;侧边栏高价值区域</h6>
									<div style="position: relative;">
										<div style="font-size: 8px;font-weight: 500;color: #fff;background: #fe2c55;padding: 2px 5px;border-radius: 7px;height: 12px;left: 62px;top: 56px;" class="absolute">
											<div >{{getBubbleText}}</div>
										</div>
										<img style="width: 100% !important;" src="//lf-cdn-tos.bytescm.com/obj/static/open/ability/coupon_admin_web/static/image/sidebar-bg-1-2.a664f645.png">
										<div class="absolute " style="width: 60%;top: 273px;left: 30px;">
											<div  style="display: flex;justify-content: space-between;align-items: center;">
												<span class="" style="font-size: 11px;color: #1c1f23;display: flex;align-items: center;">
													<span class="" role="listitem">
														<img style="width: 16px;height: 16px;" src="https://p9-developer-sign.bytemaimg.com/tos-cn-i-ke512zj2cu/4b49bdf4ea614b4c92ed4ea06081b3a2~tplv-ke512zj2cu-144x144.jpeg?lk3s=9faec0cc&amp;x-expires=2659332477&amp;x-signature=UEgpT0qyh2Fa79D%2BZTxEZm%2BAMSI%3D" >
													</span>
													<span style="margin-left: 8px;">{{drawerData.high_value_content}}</span>
												</span>
													<span class="" style="font-size: 11px;color: #fe2c55;">
														 {{getJumptext}}
													</span>
												</div>
											</div>
									</div>
								</div>
								<div v-if="bottomIndex==2" style="width: 100%;">
									<div class="" style="width: 100%;position: relative;">
										<img style="width: 100%;height: 689px;overflow:hidden;" src="//lf-cdn-tos.bytescm.com/obj/static/open/ability/coupon_admin_web/static/image/sidebar-bg-2.47a58a69.png">
										<div  style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 10;">
											<div style="position: absolute; top: 192px;left: 0;width: 100%;text-align: center;font-size: 12px;color:#5b2612;font-weight: 600;">专属福利</div>
											<div style="position: absolute; top: 242px;left: 0;width: 100%;text-align: center;font-size: 16px;color:#5b2612;font-weight: 600;">
												<span > {{ AppletCouponList.length>0 ? AppletCouponList[AppletCouponIndex].name : '免看&nbsp;1&nbsp;次广告'}}</span>
											</div>
											<div style="position: absolute; top: 300px;left: 0;width: 100%;color: #7f7f7f;text-align: center;font-size: 12px;">
												<span style="-webkit-line-clamp: 2;"> {{ AppletCouponList.length>0 ? AppletCouponList[AppletCouponIndex].name : '免费广告看一集'}}</span>
											</div>
											<div style="position: absolute; top: 380px;left: 0;width: 100%;color: #7f7f7f;text-align: center;font-size: 11px;">{{ diygetTime}}</div>
											<div style="position: absolute; top: 362px;left: 0;width: 100%;color: #7f7f7f;display:flex;justify-content:center;">
												<div style="border-bottom: 1px solid rgba(218,96,0);border-bottom-style:dashed;width:163px;opacity:.3;"></div>
											</div>
											<div style="position: absolute; top: 442px;left: 0;width: 100%;color: #D05C00;text-align: center;font-size:16px;color:#d05c00;font-weight:600;">去使用</div>
										</div>
									</div>
								</div>
								<div v-if="bottomIndex==3" style="width: 100%;">
									<div class="drawer_left_box3">
										<img class="drawer_left_box3_bgc" src="//lf-cdn-tos.bytescm.com/obj/static/open/ability/coupon_admin_web/static/image/sidebar-bg-3.e8d34d88.png">
										<div class="drawer_left_box3_textbox" >
											<div class="drawer_left_box3_textbox_first">
												<span role="listitem">
													<img class="drawer_left_box3_textbox_img"  src="https://p9-developer-sign.bytemaimg.com/tos-cn-i-ke512zj2cu/4b49bdf4ea614b4c92ed4ea06081b3a2~tplv-ke512zj2cu-144x144.jpeg?lk3s=9faec0cc&amp;x-expires=2659332477&amp;x-signature=UEgpT0qyh2Fa79D%2BZTxEZm%2BAMSI%3D">
												</span>
												<span style="color:#afb0b4;font-size:11px;">{{getapplet}}</span>
											</div>
											<div class="drawer_left_box3_textbox_last">
												 {{ AppletCouponList.length>0 ? AppletCouponList[AppletCouponIndex].name :  '福利内容'}}
											</div>
										</div>
										
									</div>
								</div>

								<div class="drawer_left_tag">
									<div class="drawer_left_tag_box">
										<button @click="changeBottomIndex(1)" :class="{ activeTag : bottomIndex == 1 }" class="tagbutton">
											侧边栏
										</button>
										<button @click="changeBottomIndex(2)" :class="{ activeTag : bottomIndex == 2 }" class="tagbutton">
											福利弹窗
										</button>
										<button @click="changeBottomIndex(3)" :class="{ activeTag : bottomIndex == 3 }" class="tagbutton">
											教育弹窗
										</button>
									</div>
								</div>
							</div>
						</div>
				</div>
				<div class="demo-drawer__footer">
					<el-button @click="closeDrawer">取 消</el-button>
					<el-button type="primary" @click="dataFormSubmitHandle" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
				</div>
			</el-drawer>
</template>

<script>
	export default {
		data() {

			return {
				id:null,
				pickerOptions: {
       				 disabledDate(time) {
          				return time.getTime() < Date.now() - 8.64e7 || time.getTime() > Date.now() + 8.64e7*60;
        			}
      			},
				bottomIndex:1,
				leftIndex:1,
				drainageMode:[//引流方式
					{value:1,label:'退出拦截弹窗'},
					{value:2,label:'用户看完广告后自动下发'},
					{value:3,label:'用户支付后自动下发'},
					{value:4,label:'小程序内组件调用'}
				],
				bubbleText:[
					{value:1,label:'有福利'},
					{value:2,label:'领福利'},
					{value:3,label:'免费看'},
					{value:4,label:'有优惠'}
				],
				useText:[
					{value:1,label:'去使用'},
					{value:2,label:'去领取'},
					{value:3,label:'免费看'},
					{value:4,label:'领优惠'}
				],
				appletlist:[],
				AppletCouponList:[],
				visibleData:{
					addstock_number:0,
				},
				AppletCouponIndex:0,
				drawerData:{
					activity_name:'',//活动名称
					applet_id:'',//小程序ID
					applet_coupon_id:'',//小程序券ID
					short_title:'',//权益简称
					receive_limit:1,//单用户可领张数
					valid_time:null,//活动生效时间
					action_trigger:4,//引流方式
					high_value_content:'',//引流文案
					recent_bubble_text:1,//红点气泡文案
					jump_text:1//按钮使用文案
					
				},
				rawData:{},
				dialog: false,
      			loading: false,
				formLabelWidth: '1072px',
				dialogFormVisible:false,
				tableLoading:false,
				total:0,
				// 增改
				dataList:[],
				dataForm: {
					page:1,
					pageSize:20,
					keyword: ''
				}
			
			}
		},
		created() {
		
		},
		computed: {
			getapplet(){
				console.log(444,this.drawerData.applet_id,this.appletlist.length)
				let that = this
				if(that.drawerData.applet_id && that.appletlist.length>0){
					console.log(409,'hanhan' )
					for(let i = 0;i < that.appletlist.length;i++){
						if(that.appletlist[i].value==that.drawerData.applet_id){
							return that.appletlist[i].label
						}
					}
				}
				return '光年爽剧1'
			},
			diygetTime(){
				let AppletCouponList = this.AppletCouponList;
				let AppletCouponIndex = this.AppletCouponIndex
				if(AppletCouponList.length>0){
					const now = new Date();
					const year = now.getFullYear();
					const month = now.getMonth() + 1;
					const day = now.getDate();
					const formattedDate = `${year}/${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}日`;
					const future = new Date();
					future.setDate(future.getDate() + AppletCouponList[AppletCouponIndex].valid_duration);
					const year2 = future.getFullYear();
					const month2 = future.getMonth() + 1;
					const day2 = future.getDate();
					const formattedDate2 = `${year2}/${month2.toString().padStart(2, '0')}/${day2.toString().padStart(2, '0')}日`
					console.log(formattedDate);
					console.log(407,AppletCouponList[AppletCouponIndex])
					return formattedDate+' ~ ' + formattedDate2
					
				}else{
					return 'x年x月x日 -  x年x月x日可用'
				}
				//2024/04/16日&nbsp;~&nbsp;2024/04/17日
			},
			getBubbleText(){
				for(let i=0;i<this.bubbleText.length;i++){
					console.log(333,this.drawerData.recent_bubble_text)
					if(this.bubbleText[i].value == this.drawerData.recent_bubble_text){
						return this.bubbleText[i].label
					}
				}
			},
			getJumptext(){
					for(let i=0;i<this.useText.length;i++){
						console.log(341, this.drawerData.jump_text)
						if(this.useText[i].value == this.drawerData.jump_text){
							return this.useText[i].label
						}
					}
			},
			dataRule() {
				return {
					activity_name: [{
							required: true,
							message: '活动名称不能为空!',
							trigger: ['blur','change']
						}
					],
					applet_id: [{
							required: true,
							message: '小程序ID不能为空!',
							trigger: ['blur','change']
						}
					],
					applet_coupon_id: [{
							required: true,
							message: '小程序券ID不能为空!',
							trigger: ['blur','change']
						}
					],
					short_title: [{
						required: true,
						message: '权益简称不能为空！',
						trigger: ['blur','change']
					}],
					receive_limit: [{
						required: true,
						message: '单用户可领张数不能为空!',
						trigger: ['blur','change']
					}],
					valid_time: [{
						required: true,
						message: '活动生效时间不能为空!',
						trigger: ['blur','change']
					}],
					action_trigger: [{
						required: true,
						message: '引流方式不能为空!',
						trigger: ['blur','change']
					}],
					high_value_content: [{
						required: true,
						message: '引流文案不能为空!',
						trigger: ['blur','change']
					}],
					recent_bubble_text: [{
						required: true,
						message: '单红点气泡文案不能为空!',
						trigger: ['blur','change']
					}],
					jump_text: [{
						required: true,
						message: '按钮使用文案不能为空!',
						trigger: ['blur','change']
					}]
				}
			}
		},
		methods: {
			initData(data){
				console.log(407,data )
				this.AppletCouponList=[]
				this.getapplelist();
				this.dialog = true
				if(data){
					this.id = data.id
					this.drawerData = data;
					this.bubbleText.forEach((element,index) => {
						if(element.label == this.drawerData.recent_bubble_text){
							this.drawerData.recent_bubble_text = element.value
						}
					});

					this.useText.forEach((element,index) => {
						if(element.label == this.drawerData.jump_text){
							this.drawerData.jump_text = element.value
						}
					});
					this.getAppletCouponId(data.applet_id)
					
				
				}else{
					this.id = null
				}
			},
			//提交表单
			dataFormSubmitHandle(){
				console.log(531, '提交表单')
				this.$refs.dataForm.validate((valid) => {
					console.log(valid + '--+++++-----------')
					if (!valid) {
						return false
					}
				
					let drawerData = JSON.parse(JSON.stringify(this.drawerData))
					drawerData.valid_time.forEach((element,index) => {
						drawerData.valid_time[index] = this.conversion_time(element)
					});
					this.bubbleText.forEach((element,index) => {
						if(element.value == drawerData.recent_bubble_text){
							drawerData.recent_bubble_text = element.label
						}
					});

					this.useText.forEach((element,index) => {
						if(element.value == drawerData.jump_text){
							drawerData.jump_text = element.label
						}
					});

					console.log(537,drawerData);
					console.log(569,this.id)
					this.$axios.post(this.id?`/api/playlet/appletCouponPromotionActivity/update/${this.id}`:'/api/playlet/appletCouponPromotionActivity/create', drawerData).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.dialog = false;
								this.$refs.dataForm.resetFields();
								this.$emit("getTableList")
								this.getTableList();
							}
						})
					}).catch(() => {})
				})
			},
			//左侧切换
			changeBottomIndex(i){
				this.bottomIndex = i
			},
			deleteAppletCouponId(){
				this.drawerData.applet_coupon_id = ''
			},
			getCouponIndex(id){
				let AppletCouponList = this.AppletCouponList   
				console.log(475,AppletCouponList,id)
				AppletCouponList.forEach((element,index) => {
					if(element.id == id){
						this.AppletCouponIndex = index
					}
				});
			},
			async getTableList(init=false){
				if(init&&typeof init =='boolean'){
					this.dataForm.page = 1;
				}
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/playlet/appletCouponPromotionActivity?'+this.$qs.stringify(this.dataForm))
				console.log(163,tableRes)
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
			async getapplelist(){
				const tableRes = await this.$axios.get('/api/common/applet/2')
				console.log(364,tableRes )
				this.appletlist = tableRes
			},
			async getAppletCouponId(id){
				const tableRes = await this.$axios.get(`/api/common/appletCoupon/${id}`)
				console.log(368,tableRes)
				this.AppletCouponList = tableRes

				this.getCouponIndex(this.drawerData.applet_coupon_id)

			},
			conversion_time(time){
				var date = new Date(time);
				// 获取年、月、日、时、分、秒
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份从0开始，需要加1
				var day = ('0' + date.getDate()).slice(-2);
				var hours = ('0' + date.getHours()).slice(-2);
				var minutes = ('0' + date.getMinutes()).slice(-2);
				// 组合成所需的格式
				var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
				return formattedDate
			},

			handleClose(done) {
				this.$confirm('确认关闭？')
				.then(_ => {
					this.$refs.dataForm.resetFields();
					done();
					this.$emit('close')
				})
				.catch(_ => {});
      		},
			closeDrawer(){
				this.$refs.dataForm.resetFields();
				this.$emit('close')
			},
		}
	}
</script>

<style scoped>
	::v-deep  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    all: initial;
}
::v-deep  .el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
    content: '*';
    color: #F56C6C;
    margin-left: 4px;
}
::v-deep .el-form-item__label {
	font-size: 14px;
    font-weight: 600;
    line-height: 40px;
	color: rgba(28,31,35,1);
}
::v-deep .el-select-dropdown__item{
    font-size: 14px;
    padding: 10px 20px;
    position: relative;
    white-space: nowrap;
    overflow: initial;
    text-overflow: initial;
    color: #606266;
    height: 108px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
	border-bottom: 1px solid rgba(28, 31,35, .08) !important;
	
}

.diyeloption {
    font-size: 14px;
    padding: 10px 20px;
    position: relative;
    white-space: nowrap;
    overflow: initial;
    text-overflow: initial;
    color: #606266;
    height: 108px;
    line-height: 34px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
	border-bottom: 1px solid rgba(28, 31,35, .08) !important;
}
.el-drawer__header{
	color: #1c1f23;
    font-size: 18px;
    font-weight: 600;
}
::v-deep.el-drawer.rtl{
    height: 100%;
    top: 0;
    bottom: 0;
    width: 1025px !important;
}
.tagbutton{
	width: calc(100% / 3);height: 100%;display: flex;align-items: center;justify-content: center;border: none;
}
.tagbutton:hover{
	cursor: pointer;
}

.activeTag{
	background: #fff;
	color: #0064FA;
}
.el-drawer__header{
	font-size: 18px;
	color: #1c1f23;
}
.diydrawer__content{
	padding: 0 24px;
	height: calc(100vh - 200px);
	overflow-y:scroll;
	border-bottom: 1px solid rgba(28, 31,35, .08);
}
.diydrawer_header{
	width: 100%;height: 200px;display: flex;
}
.diydrawer_left{
	width: 60%;border-top: 1px solid rgba(28, 31,35, .08);
}

.coupon_card{
	color: #8492a6; font-size: 13px;background-color: #f7f7f7;padding: 10px;display: flex;
}

.demo-drawer__footer{
	display: flex;justify-content: flex-end;padding: 30px;
}
.drawer_left_tag{
	width: 100%;display: flex;justify-content: center;margin-top: 30px;
}
.drawer_left_tag_box{
	width: 70%;height: 32px;background: rgba(46,50,56,.05);display: flex;padding: 4px;box-sizing: border-box;border-radius: 4px;
}
.drawer_left_tag_box button{
	
}
.drawer_left_box3{
	width: 100%;position: relative;
}
.drawer_left_box3_bgc{
	width: 100%;height: 689px;overflow:hidden;
}
.drawer_left_box3_textbox{
	position: absolute; top: 362px;left: 55px;width: 198px;text-align: center;
}
.drawer_left_box3_textbox_first{
	display:flex;align-items:center;margin-left: 33px;margin-top: 67px;
}
.drawer_left_box3_textbox_img{
	width:14px;height:14px;margin-top: 4px;margin-right: 4px;
}
.drawer_left_box3_textbox_last{
	text-align:center;color:#5b2612;font-size:16px;margin-left: 32px;margin-top: 6px;
}
.diydrawer_right{
	width: 40%;padding-left: 40px;padding-right: 20px;
}
.semi-typography{
	margin-top: 8px;font-size: 16px;font-weight: 600;
}
.diydrawer_left_box1{

}
</style>


<style>
.diydrawer{
	height: 100%;
    top: 0;
    bottom: 0;
    width: 1025px !important;
	
}
.diydrawer>.el-drawer__header>span{
	font-size: 18px !important;
	color: #1c1f23 !important;
	font-weight: 600;
}
</style>